<template>
    <div>
        <div class='table-wrapper'>
            <div class='h'>
                <div class='l'>
                    <div>
                    </div>
                </div>
                <div class='l'>
                    <div>
                        座位数
                    </div>
                </div>
            </div>
            <div class='h'>
                <div v-for='(i2,k2) in c1' :key='k2' class='v'>
                    <div class='l' >
                        <div>
                            {{i2}}
                        </div>
                    </div>
                    <div class='h'>
                        <div v-for='(i3,k3) in c2' :key='k3' class='l'>
                            <div>
                                {{i3}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='v'>
                <div v-for='(i2,k2) in r1' :key='k2' class='h'>
                    <div class='l'>
                        <div>
                            {{i2}}
                        </div>
                    </div>
                    <div class='v'>
                        <div v-for='(i3,k3) in r2' :key='k3' class='l' >
                            <div>
                                {{i3}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='v'>
                <div v-for='k in 9' :key='k' class='h'>
                    <div v-for='i in 4' :key='i' class='h'>
                        <div class='l'>
                            <div>
                                {{(k => k&&k.length?k.map(i=>i.v1).reduce((i,k)=>i+k):0)(resMap[k*4+i-5])}}
                            </div>
                        </div>
                        <div class='l'>
                            <div>
                                {{(k => k&&k.length?k.map(i=>i.v2).reduce((i,k)=>i+k):0)(resMap[k*4+i-5]).toFixed(2)}}%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='input-wrapper'>
            姓名：<inputSpan v-model="dede.name"></inputSpan>
        </div>
    </div>
</template>
<script>
import data from './data.json';
export default {
    mounted(){
        for(var i=0;i<100;i++){
            this.resMap[i] = [];
        }
        data.result.map(i=>{
            return {
                ...i,
                r1:this.r1Map[i.surcharge_value],
                r2:this.r2Map[i.start_eage],
                c1:this.c1Map[i.surcharge_order],
                v1:i.eage_value*1,
                v2:i.eage_rate*100,
            }
        }).map(i=>{
            this.resMap[i.r1 * 12  + i.r2*4 + i.c1 - 17].push(i);
        });
        this.$forceUpdate();
    },
    data(){
        return {
            dede:{},
            resMap:{},
            r1Map:{
                '1':1,
                '2':2,
                '3':3,
            },
            r2Map:{
                '1':1,
                '6':2,
                '10':3,
            },
            c1Map:{
                '1':1,
                '2':2,
                '3':3,
                '4':3,
                '5':3,
                '6':3,
                '7':4,
                '8':4,
                '9':4,
                '10':4,
            },
            c2Map:{
                '1':'eage_value',
                '2':'eage_rate',
            },
            nextSelect:{
                'v':'h',
                'h':'v',
            },
            c1:['0-1','1-2','2-6','6-10'],
            c2:['a','b'],
            r1:['a','b','c'],
            r2:['1-6','6-10','10-20'],
        }
    }    
}
</script>
<style lang="less" scoped>
    .table-wrapper {
        width: 900px;
        height: 400px;
        padding: 1px;
        margin: 10px auto;
        background-color: #000;
        display: grid;
        grid-gap:1px;
        grid-template-rows:2fr 9fr;
        grid-template-columns:1fr 3fr;
        .v {
            display: grid;
            grid-gap: 1px;
            grid-auto-flow: row;
        }
        .h {
            display: grid;
            grid-gap:1px;
            grid-auto-flow: column;
        }
        .l {
            background-color:#fff;
            >div{
                width: 80px;
                margin: auto;
            }
        }
    }
    .input-wrapper {
        margin: 20px;
        padding: 20px;
    }
</style>

